Angular Material এর Drag and Drop ফিচার ব্যবহার করে আপনি অ্যাঙ্গুলার অ্যাপ্লিকেশনে একটি ইন্টারঅ্যাকটিভ এবং ব্যবহারকারীর জন্য উপযোগী ড্র্যাগ এবং ড্রপ ফিচার সহজেই ইমপ্লিমেন্ট করতে পারেন। এই ফিচারটি বিভিন্ন উপাদানকে এক জায়গা থেকে অন্য জায়গায় ড্র্যাগ ও ড্রপ করার মাধ্যমে ব্যবস্থা নিয়ন্ত্রণ করতে সহায়তা করে।
Angular Material এর CDK Drag and Drop একটি সহজ এবং শক্তিশালী উপায় সরবরাহ করে যা ড্র্যাগ এবং ড্রপ কার্যকারিতা দ্রুত এবং কার্যকরভাবে অ্যাপ্লিকেশনে যুক্ত করতে পারে।
প্রথমে আপনাকে @angular/cdk/drag-drop মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।
import { DragDropModule } from '@angular/cdk/drag-drop';
import { NgModule } from '@angular/core';
@NgModule({
imports: [
DragDropModule
]
})
export class AppModule { }
এখানে DragDropModule ইনস্টল করা হয়েছে, যা ড্র্যাগ এবং ড্রপ কার্যকারিতার জন্য প্রয়োজনীয় সেবা সরবরাহ করে।
এখন, HTML টেমপ্লেটে cdkDrag এবং cdkDrop ডিরেকটিভ ব্যবহার করে ড্র্যাগ এবং ড্রপ ফিচার প্রয়োগ করা যেতে পারে।
এটি একটি সিম্পল ড্র্যাগ এবং ড্রপ ডেমো:
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div cdkDrag *ngFor="let item of items" class="example-box">
{{item}}
</div>
</div>
এখানে:
এখন কম্পোনেন্ট ক্লাসে ড্র্যাগ এবং ড্রপ ফাংশনটি ইমপ্লিমেন্ট করতে হবে, যা ড্র্যাগড উপাদানকে পরিচালনা করবে।
import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-drag-drop',
templateUrl: './drag-drop.component.html',
styleUrls: ['./drag-drop.component.css']
})
export class DragDropComponent {
items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
drop(event: CdkDragDrop<string[]>) {
const previousIndex = this.items.indexOf(event.item.data);
const currentIndex = event.currentIndex;
// List item reorder
moveItemInArray(this.items, previousIndex, currentIndex);
}
}
এখানে:
টেক্সট, বোতাম, বা অন্যান্য উপাদান গুলো স্টাইল করতে CSS ব্যবহার করা যেতে পারে। ড্র্যাগ এবং ড্রপ উপাদানের জন্য স্টাইল যুক্ত করতে:
.example-list {
width: 200px;
max-height: 400px;
border: solid 1px #ccc;
padding: 10px;
display: flex;
flex-direction: column;
}
.example-box {
padding: 10px;
margin: 5px;
background-color: #e0e0e0;
border-radius: 5px;
cursor: move;
}
এখানে:
আপনি চাইলে ড্র্যাগ এবং ড্রপ অপারেশনের জন্য অর্ডার পরিবর্তন করতে পারেন এবং ফাংশনালিটি আরো উন্নত করতে পারেন। এর মাধ্যমে আপনি আইটেমগুলির অবস্থান পরিবর্তন করে ডেটা সংরক্ষণ বা অন্য কোনো কার্যকরী কাস্টমাইজেশন করতে পারেন।
এটি moveItemInArray ফাংশন দিয়ে করতে পারেন, যা উপাদানের অবস্থান পরিবর্তন করে:
import { moveItemInArray } from '@angular/cdk/drag-drop';
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
আপনি Nested Drag and Drop প্রয়োগ করতে চাইলে, উপাদানগুলোর মধ্যে একাধিক স্তর তৈরি করতে পারেন। উদাহরণস্বরূপ:
<div cdkDropList [cdkDropListData]="items" class="list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of items" cdkDrag>
<div>{{item.name}}</div>
<div cdkDropList [cdkDropListData]="item.children" (cdkDropListDropped)="drop($event)">
<div *ngFor="let child of item.children" cdkDrag>{{child.name}}</div>
</div>
</div>
</div>
এখানে, একটি অভ্যন্তরীণ cdkDropList আছে যা আইটেমের মধ্যে nested ড্র্যাগ এবং ড্রপ অনুমোদন করে।
Angular Material এর Drag and Drop ফিচার একটি অত্যন্ত কার্যকরী টুল, যা ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও স্বতঃস্ফূর্ত ও উপযোগী করে তোলে। CDK Drag and Drop ব্যবহারের মাধ্যমে আপনি অ্যাঙ্গুলার অ্যাপ্লিকেশনে ড্র্যাগ এবং ড্রপ কার্যকারিতা অত্যন্ত সহজভাবে বাস্তবায়ন করতে পারবেন। এটি লেজি লোডিং, নেস্টেড ড্র্যাগ, এবং ফ্লেক্সিবল ডেটা পরিচালনা সমর্থন করে, যা বড় অ্যাপ্লিকেশনগুলোতে পারফরম্যান্স উন্নত করতে সহায়তা করে।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
